<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=2,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>test tab dropload</title>
	<link rel="stylesheet" href="css/dropload.css">
	<link rel="stylesheet" href="css/tg_mobile_reset.css">
	<script src="lib/zepto.min.js"></script>
	<script src="lib/dropload.min.js"></script>
	<style>
		html{font-size:20px}
		.header{position:fixed;top:0;width:100%;background-color: #fff;border-bottom: 2px solid #000;}
		.header>ul>li{float:left;width:25%;height:1.2rem;text-align:center}
		.cnt{margin-top:1.5rem}
		.cnt>ol>li>div{height:5rem;border:2px solid purple;font-size:0.65rem;margin-top:1rem}
		.header>ul>li.on{background-color:red}
		.cnt>ol>li{display:none}
		.cnt>ol>li.show_out{display:block}
		#h_ul{overflow:hidden}
	</style>
</head>
<body>
	<div class="tab_wrap">
		<div class="header">
			<ul id="h_ul">
				<li class="test_h on">111</li>
				<li class="test_h">222</li>
				<li class="test_h">333</li>
				<li class="test_h">444</li>
			</ul>
		</div>
		<div class="cnt">
			<ol id="n_ol">
				<li class="test_n show_out">
					
				</li>
				<li class="test_n"></li>
				<li class="test_n"></li>
				<li class="test_n"></li>
			</ol>
		</div>
	</div>

	<script>

		$(function() {
			var itemIndex=0;
			var tab1LoadEnd = false;
			var tab2LoadEnd = false;
			var tab3LoadEnd = false;
			var tab4LoadEnd = false;
			var Gdata = {
				'orderUid': 2732556,
                'orderOpt': '2',
                'pageNum': 1, //页数
                'pageSize': 2 // 每一页条数
			};
			
			var tabNum = {
				'0':1,
				'1':1,
				'2':1,
				'3':1
			};
			var scrollP = {
				'0':0,
				'1':0,
				'2':0,
				'3':0
			};
			$('#h_ul>li').on('click',function() {
				var $cntLis=$('#n_ol>li');
				scrollP[itemIndex]=window.scrollY;
				itemIndex=$(this).index();
				$(this).addClass('on').siblings('.on').removeClass('on');
				$cntLis.eq(itemIndex).addClass('show_out').siblings('.show_out').removeClass('show_out');
				if(itemIndex==0) {
					window.scrollTo(0,scrollP[itemIndex]);
					if(!tab1LoadEnd) {
						dpload.unlock();
               			dpload.noData(false);
					}else {
						dpload.lock('down');
                		dpload.noData();
					}
				}else if(itemIndex==1) {
					window.scrollTo(0,scrollP[itemIndex]);
					if(!tab2LoadEnd) {
						dpload.unlock();
               			dpload.noData(false);
					}else {
						dpload.lock('down');
                		dpload.noData();
					}
				}else if(itemIndex==2) {
					window.scrollTo(0,scrollP[itemIndex]);
					if(!tab3LoadEnd) {
						dpload.unlock();
               			dpload.noData(false);
					}else {
						dpload.lock('down');
                		dpload.noData();
					}
				}else if(itemIndex==3) {
					window.scrollTo(0,scrollP[itemIndex]);
					if(!tab4LoadEnd) {
						dpload.unlock();
               			dpload.noData(false);
					}else {
						dpload.lock('down');
                		dpload.noData();
					}
				}
        		dpload.resetload();
			});
			var dpload=$('#n_ol').dropload({
				scrollArea : window,
				loadDownFn:function(me) {
					// console.log(tabNum[itemIndex]);
					Gdata.pageNum=tabNum[itemIndex];
					Gdata.orderOpt=itemIndex+1;
					renderList(me);
				},
				loadUpFn:function(me) {
					Gdata.pageNum=tabNum[itemIndex]=1;
					Gdata.orderOpt=itemIndex+1;
					dpload.resetload();
					dpload.noData(false);
					dpload.unlock();
					renderList(me);
				}
			});

			function dataEnd() { //锁住开关
				if(itemIndex==0) {
					tab1LoadEnd=true;
				}else if(itemIndex==1) {
					tab2LoadEnd=true;
				}else if(itemIndex==2) {
					tab3LoadEnd=true;
				}else if(itemIndex==3) {
					tab4LoadEnd=true;
				}
				// tab1LoadEnd=tab2LoadEnd=tab3LoadEnd=tab4LoadEnd=true;
			}
			function dataStart() { //解锁开关
				if(itemIndex==0) {
					tab1LoadEnd=false;
				}else if(itemIndex==1) {
					tab2LoadEnd=false;
				}else if(itemIndex==2) {
					tab3LoadEnd=false;
				}else if(itemIndex==3) {
					tab4LoadEnd=false;
				}
			}

			function ifUpFresh(arr) { //判断是否是第一页(下拉刷新)
				if(Gdata.pageNum==1) {
					$('#n_ol li').eq(itemIndex).html(arr.join(''));
					dataStart();
				}else {
					$('#n_ol li').eq(itemIndex).append(arr.join(''));
				}
				
			}

			function renderList(me) {
				$.ajax({
					type:'POST',
					contentType:'application/json;charset=UTF-8',
					url:'http://106.14.19.71:9090/api/order/tenantlist',
					data:JSON.stringify(Gdata),
					success:function(res) {
						// console.log(res);
						var data=res.pageInfo.list;
						var currArr=[];
						tabNum[itemIndex]++;

						if(data.length===0) { //没有数据
							dataEnd();
							me.noData(true);
							me.lock()
						}else if(data.length==Gdata.pageSize) {//有数据
							$.each(data,function(i,obj) {
								currArr.push(
									'<div>',
										'<p>当前页的第 <span class="">'+(i+1)+'</span>   条数据</p>',
										'<p>这是页数'+Gdata.pageNum+'</p>',
										'<p>这是tab  '+(itemIndex+1)+'</p>',
									'</div>'
								)
							});
							
							ifUpFresh(currArr);
							
						}else if(data.length<Gdata.pageSize) {//下一次请求会没有数据
							$.each(data,function(i,obj) {
								currArr.push('<div>'+obj.orderId+'--'+obj.total+'</div>')
							});

							ifUpFresh(currArr);
							
							dataEnd();
							me.noData(true);
							me.lock();
						}
						me.resetload();
					}
				})
			}
		})
	</script>
	<script src="lib/rem.js"></script>
</body>
</html>